package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Avatar() {
	@layouts.DocsLayout(
		"Avatar",
		"Visual representation of a user through images or initials.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "examples",
				Text: "Examples",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "fallback",
						Text: "Fallback",
					},
					{
						ID:   "sizes",
						Text: "Sizes",
					},
					{
						ID:   "with_icon",
						Text: "With Icon",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "avatar",
						Text: "Avatar",
					},
					{
						ID:   "image",
						Text: "Image",
					},
					{
						ID:   "fallback",
						Text: "Fallback",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Avatar",
			Description: templ.Raw("Visual representation of a user through images or initials."),
			Tailwind:    true,
			VanillaJS:   true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Avatar",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.AvatarDefault(),
				PreviewCodeFile: "avatar_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "avatar",
					JSFiles:       []string{"avatar"},
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Fallback",
					ShowcaseFile:    showcase.AvatarFallback(),
					PreviewCodeFile: "avatar_fallback.templ",
					ID:              "fallback",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Sizes",
					ShowcaseFile:    showcase.AvatarSizes(),
					PreviewCodeFile: "avatar_sizes.templ",
					ID:              "sizes",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Icon",
					ShowcaseFile:    showcase.AvatarWithIcon(),
					PreviewCodeFile: "avatar_with_icon.templ",
					ID:              "with_icon",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Group",
					ShowcaseFile:    showcase.AvatarGroup(),
					PreviewCodeFile: "avatar_group.templ",
					ID:              "group",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="avatar" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Avatar",
						Description: "Root container for avatar component. Default size is 8 (size-8). Use the Class prop to customize size and styling.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the avatar element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the avatar. Use this to set custom sizes (e.g. 'size-12', 'size-16') or other styles.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the avatar element.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="image" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Image",
						Description: "Image element within the avatar that displays the user's photo.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the image element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the image.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the image element.",
								Required:    false,
							},
							{
								Name:        "Src",
								Type:        "string",
								Default:     "",
								Description: "Image source URL.",
								Required:    true,
							},
							{
								Name:        "Alt",
								Type:        "string",
								Default:     "",
								Description: "Alternative text for the image.",
								Required:    false,
							},
						},
					})
				</div>
				<div id="fallback" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Fallback",
						Description: "Fallback element displayed when the image fails to load, typically showing initials or an icon.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the fallback element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the fallback.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the fallback element.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
